<template>
	<view class="user">
		<view class="card">
			<view class="usermsg flex-between">
				<view class="left">
					<view class="name flex">
						<text>lm1213</text> 
						<view class="label">初始</view>
					</view>
					<view class="p">ID:733717</view>
				</view>
				<view class="avatar flex-center">
					<image src="/static/tab3.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="ad flex">
				<image src="/static/ad.png" mode="widthFix"></image>
				 <swiper class="swiper" :indicator-dots="false" :autoplay="true" :circular="true" :vertical="true">
					 <block v-for="(item,index) in 3" :key="index">
						<swiper-item>
							<view class="swiper-item">公告内容{{index}}</view>
						</swiper-item> 
					 </block>
						
				</swiper>
				                       
			</view>
			
		</view>
		<view class="card">
			
			<navigator url="/pages/user/tream" hover-class="none" class="list flex-between">
				<view class="left flex">
					<image src="/static/user1.png" mode="widthFix"></image>
					我的团队
				</view>
				<view class="right">
					<text>5人</text>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator url="/pages/user/invite" hover-class="none" class="list flex-between">
				<view class="left flex">
					<image src="/static/user2.png" mode="widthFix"></image>
					邀请好友
				</view>
				<view class="right">
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
			</navigator>
			<navigator url="/pages/user/modifyPw" hover-class="none" class="list flex-between">
				<view class="left flex">
					<image src="/static/user3.png" mode="widthFix"></image>
					修改密码
				</view>
				<view class="right">
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
			</navigator>
			<view class="list flex-between" @click="loginout">
				<view class="left flex">
					<image src="/static/user4.png" mode="widthFix"></image>
					退出登录
				</view>
				<view class="right flex">
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
				
			</view>
		</view>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			loginout(){
				uni.showModal({
					title:"提示",
					content:"是否确认退出？",
					success:res=>{
						if(res.confirm){
							uni.reLaunch({
								url:"/pages/login/login"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">

	.user{
		.card{
			background:#171a2d ;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			.usermsg{
				border-bottom: 1px solid #eee;
				padding-bottom: 40rpx;
				.left{
					.name{
						margin-bottom: 30rpx;
						text{
							color:white;
							font-weight: bold;
							font-size: 32rpx;
						}
						.label{
							background: #f79641;
							font-size: 24rpx;
							color:#333;
							padding: 0 10rpx;
							border-radius: 20rpx;
							margin-left: 20rpx;
						}
					}
					.p{
						color:#828dba;
					}
				}
				.avatar{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background: #ddd;
					image{
						width: 60rpx;
						height: auto;
					}
				}
			}
			.ad{
				image{
					width: 35rpx;
					height:auto;
					margin-right: 20rpx;
				}
				
				.swiper{
					width: 560rpx;
					height: 100rpx;
					.swiper-item{
						line-height: 100rpx;
						font-size: 30rpx;
						color:#828dba;
					}
				}
			}
			.list{
				line-height: 100rpx;
				border-bottom: 1px solid  #26293a;
				&:last-child{
					border:0
				}
				.left{
					color:white;
					font-size: 30rpx;
					image{
						width: 44rpx;
						height: auto;
						margin-right: 15rpx;
					}
				}
				.right{
					text{
						color:#828dba;
						font-size: 30rpx;
					}
					image{
						width: 26rpx;
						height: auto;
						margin-left: 10rpx;
					}
					
				}
			}
		}
	}
</style>
